<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="用户编号"
        prop="id"
      >
      </el-table-column>
      <el-table-column
        label="用户名"
        prop="username"
      >
      </el-table-column>
      <el-table-column
        label="性别"
        prop="gender"
      >
      </el-table-column>
      <el-table-column
        label="学校"
        prop="school"
      >
      </el-table-column>
      <el-table-column
        label="电子邮件"
        prop="email"
      ></el-table-column>
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入用户名搜索"
            @keyup.enter.native ="searchKey"
          />
        </template>
        <template slot-scope="scope">
          <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="600px" :center=true>
            <el-form :model="form">
              <el-form-item label="昵称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio-group v-model="form.gender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="学校" :label-width="formLabelWidth">
                <el-input v-model="form.school" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电子邮件" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item v-show="false" label="编号" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false,handleEdit()">确 定</el-button>
            </div>
          </el-dialog>
          <el-button @click="dialogFormVisible = true,showUser(scope.row)" size="small">修改<i class="el-icon-edit"></i></el-button>
          <el-button
            size="small"
            type="danger"
            @click="open(scope.row)">删除<i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <Page ref="page"></Page>
    <Result ref="result"></Result>
    <Identity ref="legal"></Identity>
  </div>
</template>

<script>
import Page from '../base/Page'
import Result from '../base/MessageResult'
import Identity from './identity'
export default {
  name: 'User_list',
  components: {Page, Result, Identity},
  data () {
    return {
      tableData: [{}],
      search: '',
      confirm: '',
      dialogFormVisible: false,
      pageSize: 5,
      form: {
        id: '',
        name: '',
        gender: '',
        email: '',
        school: '',
        type: [],
        resource: ''
      },
      formLabelWidth: '120px'
    }
  },
  mounted () {
    this.$refs.legal.isLegal()
    // 加载分页数据、分页条
    this.$refs.page.showPage('user', 1, this.pageSize)
    this.$refs.page.showPagination('user')
    this.$refs.page.type = 'user'
  },
  methods: {
    open (row) {
      var r = this
      var name = row.username
      this.confirm = '确定'
      this.$confirm('确定删除用户' + name + '吗', '提示', {
        confirmButtonText: this.confirm,
        cancelButtonText: '取消',
        type: 'warning'
      }
      ).then(
        () => {
          if (!r.confirm.includes('确定', 0)) {
            return
          }
          this.handleDelete(row)
        }
      )
    },
    handleEdit () {
      if (!this.legalEmail()) {
        return
      }
      var that = this
      this.axios({
        url: 'http://localhost:8080/linearAlgebra/updateUser',
        method: 'post',
        contentType: 'application/json',
        data: {
          username: this.form.name,
          id: this.form.id,
          email: this.form.email,
          gender: this.form.gender,
          school: this.form.school
        }})
        .then(function (response) {
          if (response.data === 1) {
            that.$refs.result.success('修改用户成功')
          } else {
            that.$refs.result.fail('修改用户失败')
          }
          that.$refs.page.showPage('user', that.$refs.page.currentPage, that.pageSize)
        }
        )
    },
    handleDelete (row) {
      var that = this
      this.axios.get('http://localhost:8080/linearAlgebra/deleteUser?id=' + row.id)
        .then(function (response) {
          if (response.data === 1) {
            that.$refs.result.success('删除用户成功')
          } else {
            that.$refs.result.fail('删除用户失败')
          }
          that.$refs.page.showPage('user', that.$refs.page.currentPage, that.pageSize)
          that.$refs.page.showPagination('user', that.pageSize)
        }, function () {
          that.$refs.result.fail('该用户发表过文章或评论，请先删除这些')
        }
        )
    },
    showUser: function (row) {
      this.form.name = row.username
      this.form.gender = row.gender
      this.form.school = row.school
      this.form.email = row.email
      this.form.id = row.id
    },
    searchKey () {
      if (this.search === '') {
        this.$refs.page.showPage('user', 1, this.pageSize)
        return
      }
      var that = this
      this.axios.get('http://localhost:8080/linearAlgebra/findUser?name=' + that.search)
        .then(function (response) {
          that.tableData = response.data
        })
    },
    legalEmail () { // 判断是否为合法的邮箱
      var reg = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
      if (reg.test(this.form.email)) {
        return true
      } else {
        this.$refs.result.fail('邮箱格式不对')
        return false
      }
    }
  }
}
</script>

<style scoped>
</style>
